"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Filter, Download, Eye, Trash2, Calendar } from "lucide-react"

export function RecognitionRecords() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterType, setFilterType] = useState("all")
  const [filterStatus, setFilterStatus] = useState("all")

  // 模拟识别记录数据
  const records = [
    {
      id: "REC001",
      date: "2024-01-15",
      time: "14:30:25",
      crop: "玉米",
      method: "图像上传检测",
      result: "玉米大斑病",
      confidence: 85,
      severity: "中等",
      status: "已处理",
      operator: "张三",
      images: 3,
      treatment: "已施用苯醚甲环唑",
    },
    {
      id: "REC002",
      date: "2024-01-15",
      time: "10:15:42",
      crop: "玉米",
      method: "实时拍照检测",
      result: "玉米螟",
      confidence: 92,
      severity: "严重",
      status: "待处理",
      operator: "李四",
      images: 1,
      treatment: "待制定方案",
    },
    {
      id: "REC003",
      date: "2024-01-14",
      time: "16:45:18",
      crop: "玉米",
      method: "批量分析",
      result: "健康",
      confidence: 95,
      severity: "无",
      status: "已确认",
      operator: "王五",
      images: 5,
      treatment: "无需处理",
    },
  ]

  const filteredRecords = records.filter((record) => {
    const matchesSearch =
      record.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      record.result.toLowerCase().includes(searchTerm.toLowerCase()) ||
      record.operator.toLowerCase().includes(searchTerm.toLowerCase())

    const matchesType = filterType === "all" || record.method === filterType
    const matchesStatus = filterStatus === "all" || record.status === filterStatus

    return matchesSearch && matchesType && matchesStatus
  })

  const getStatusColor = (status: string) => {
    switch (status) {
      case "已处理":
        return "bg-green-100 text-green-800"
      case "待处理":
        return "bg-red-100 text-red-800"
      case "已确认":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case "严重":
        return "bg-red-100 text-red-800"
      case "中等":
        return "bg-yellow-100 text-yellow-800"
      case "轻微":
        return "bg-green-100 text-green-800"
      case "无":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">识别记录管理</h1>
          <p className="text-muted-foreground">管理和查看所有病虫害识别记录</p>
        </div>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-foreground">156</div>
            <div className="text-sm text-muted-foreground">总识别次数</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-red-600">23</div>
            <div className="text-sm text-muted-foreground">检出病虫害</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-green-600">133</div>
            <div className="text-sm text-muted-foreground">健康作物</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-blue-600">89.7%</div>
            <div className="text-sm text-muted-foreground">识别准确率</div>
          </CardContent>
        </Card>
      </div>

      {/* 搜索和筛选 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-5 w-5" />
            搜索与筛选
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索记录ID、识别结果或操作员..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={filterType} onValueChange={setFilterType}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="检测方法" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">所有方法</SelectItem>
                <SelectItem value="图像上传检测">图像上传检测</SelectItem>
                <SelectItem value="实时拍照检测">实时拍照检测</SelectItem>
                <SelectItem value="批量分析">批量分析</SelectItem>
              </SelectContent>
            </Select>
            <Select value={filterStatus} onValueChange={setFilterStatus}>
              <SelectTrigger className="w-32">
                <SelectValue placeholder="状态" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">所有状态</SelectItem>
                <SelectItem value="已处理">已处理</SelectItem>
                <SelectItem value="待处理">待处理</SelectItem>
                <SelectItem value="已确认">已确认</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* 记录表格 */}
      <Card>
        <CardHeader>
          <CardTitle>识别记录</CardTitle>
          <CardDescription>共找到 {filteredRecords.length} 条记录</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>记录ID</TableHead>
                <TableHead>日期时间</TableHead>
                <TableHead>作物</TableHead>
                <TableHead>检测方法</TableHead>
                <TableHead>识别结果</TableHead>
                <TableHead>置信度</TableHead>
                <TableHead>严重程度</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>操作员</TableHead>
                <TableHead>操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredRecords.map((record) => (
                <TableRow key={record.id}>
                  <TableCell className="font-medium">{record.id}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <Calendar className="h-3 w-3" />
                      <span className="text-sm">{record.date}</span>
                    </div>
                    <div className="text-xs text-muted-foreground">{record.time}</div>
                  </TableCell>
                  <TableCell>{record.crop}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{record.method}</Badge>
                  </TableCell>
                  <TableCell className="font-medium">{record.result}</TableCell>
                  <TableCell>
                    <Badge variant="secondary">{record.confidence}%</Badge>
                  </TableCell>
                  <TableCell>
                    <Badge className={getSeverityColor(record.severity)}>{record.severity}</Badge>
                  </TableCell>
                  <TableCell>
                    <Badge className={getStatusColor(record.status)}>{record.status}</Badge>
                  </TableCell>
                  <TableCell>{record.operator}</TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      <Button variant="ghost" size="sm">
                        <Eye className="h-3 w-3" />
                      </Button>
                      <Button variant="ghost" size="sm">
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
